<template>
	<view class="page">
		<u--form class="form" labelPosition="top" labelWidth="160rpx" :model="form" :rules="rules" ref="form" errorType="toast">
			<u-cell @click="categoryPopShow = true" title="分类" :value="categoryName" :is-link="true" :border="false" :clickable="false"></u-cell>
			<u-form-item label="曲谱名称" prop="title">
				<u--input v-model="form.title" clearable placeholder="请输入曲谱名称" border="none" :customStyle="{background:'#f9f9f9',padding:'16rpx'}"></u--input>
			</u-form-item>
			
			<u-form-item label="简介" prop="content">
				<u--textarea v-model="form.content" placeholder="请输入内容" maxlength="200" count border="none" :customStyle="{background:'#f9f9f9',padding:'16rpx'}"></u--textarea>
			</u-form-item>
			<u-form-item label="图片">
				<u-upload
					:fileList="form.fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					:maxCount="20"
				></u-upload>
			</u-form-item>
		</u--form>
		<u-button type="success" text="提交信息" @click="submit" :customStyle="{marginTop:'30rpx'}"></u-button>
		
		
		<u-picker :show="categoryPopShow" keyName="title" @confirm="cateGoryConfirm" @cancel="categoryPopShow=false" :columns="categoryColumn" confirmColor="#e93323"></u-picker>
		
		<u-picker :show="unitPopShow" keyName="name" @confirm="unitConfirm" @cancel="unitPopShow=false" :columns="unitColumn" confirmColor="#e93323"></u-picker>
		
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				region_name: '',
				unitColumn:[],
				categoryColumn:[],
				categoryPopShow: false,
				unitPopShow: false,
				categoryName:'',
				form:{
					category_id:'',
					title:'',
					content:'',
					fileList:[]
				},
				rules:{},
				
			};
		},
		onShow(){
			if(!uni.getStorageSync('LOGIN_TOKEN_KEY')){
				uni.navigateTo({
					url: "/pages/login/login"
				});
				return;
			}
			uni.$once("city",(data)=>{
				this.region_name = data.region_name;
				this.form.region_id = data.region_id;
			})
			
			if(uni.getStorageSync("CITYDATA")){
				var data = uni.getStorageSync("CITYDATA");
				this.region_name = data.region_name;
				this.form.region_id  = data.region_id;
			}
			
		},
		onLoad(){
			
			this.getPostInfoBasicData();
		},
		methods: {
			submit(){
				uni.showLoading({
					title: "提交中..."
				})
				var data = {...this.form};
				data.fileList = JSON.stringify(data.fileList)
				uni.$u.http.post('/Opern/add',data).then(async res =>{
					uni.hideLoading()
					this.resetForm();
				}).catch(err => {
					uni.hideLoading()
				})
			},
			resetForm(){
				this.form = {
					category_id:'',
					title:'',
					content:'',
					fileList:[]
				}
			},
			afterRead(event) {
				let lists = [].concat(event.file)
				var _this = this;
				var token = uni.getStorageSync('LOGIN_TOKEN_KEY');
				var item = lists[0];
				if (lists && item && item.url) {
					uni.uploadFile({
						url: config.baseApi + '/Upload/upload', //仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData:{
						},
						header: {
							"Authorization": token
						},
						success: (uploadFileRes) => {
							var rs = JSON.parse(uploadFileRes.data)
							if (rs.status == 200) {
								uni.$u.toast("上传成功!")
							}
							_this.form.fileList.push({
								'name':'',
								'url': config.baseUrl + rs.data
							})
						}
					});
				}
			},
			toSelectCity(){
				uni.navigateTo({
					url: "/pages/mine/region"
				})
			},
			getPostInfoBasicData(){
				var _this = this;
				uni.$u.http.post('/Home/infoBasicData',{page:1,size:40}).then(async res =>{
					this.unitColumn = [res.units]
					this.categoryColumn = [res.categories]
				}).catch(err => {
				})
			},
			cateGoryConfirm(e){
				console.log("e",e);
				var value = e.value[0];
				this.categoryName = value.title
				this.form.category_id = value.category_id;
				this.categoryPopShow = false;
			},
			selectClick(index){
				console.log(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	padding: 30rpx;
}
.unit{
	display: flex;
	align-items: center;
	text{
		margin-right: 10rpx;
	}
}
</style>
